<template>
  <div>
    <div class="headtitle">
      {{ title }}
    </div>
    <div class="conditionForm">
      <el-form :inline="true" ref="queryForm" :model="queryForm">
        <el-form-item label="书名">
          <el-input v-model="queryForm.bname" placeholder="书名"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="queryForm.author" placeholder="作者"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="queryForm.priceArea" placeholder="价格"></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <el-input v-model="queryForm.cname" placeholder="类别"></el-input>
        </el-form-item>
        <el-form-item label="出版时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              v-model="queryForm.startTime"
              placeholder="开始时间"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              type="date"
              v-model="queryForm.endTime"
              placeholder="结束时间"
              style="width: 100%;"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button @click="doQuery()" type="primary">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="showAddDialog()" type="primary">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 列表数据 -->
    <div class="table">
      <el-table :data="tableData" border style="width: 100%;text-align:center">
        <el-table-column prop="id" label="书籍编号" width="300px">
        </el-table-column>
        <el-table-column prop="bname" label="书名" width="200px">
        </el-table-column>

        <el-table-column prop="author" label="作者"> </el-table-column>

        <el-table-column prop="cname" label="类别"> </el-table-column>
        <el-table-column prop="oriprice" label="定价"> </el-table-column>
        <el-table-column prop="publishtime" label="出版日"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="showEditDialog(scope.row)"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-button @click="doRemoveBook(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageSty"
        background
        layout="prev, pager, next"
        :current-page.sync="queryForm.pageNo"
        :page-size="queryForm.pageSize"
        :total="queryForm.recordTotal"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <!-- 添加图书弹框 -->

    <el-dialog title="添加图书" :visible.sync="dialogAddFormVisible">
      <el-form
        :inline="true"
        ref="dataForm"
        :model="dataForm"
        label-width="120px"
      >
        <el-form-item label="书籍名称">
          <el-input v-model="dataForm.bname"></el-input>
        </el-form-item>

        <el-form-item label="作者">
          <el-input v-model="dataForm.author"></el-input>
        </el-form-item>

        <el-form-item label="分类">
          <el-select
            v-model="addPopupDepend.selectValuelev1"
            placeholder="请选择"
            @change="selectChanged1()"
          >
            <!-- 二级 -->
            <el-option
              v-for="item in addPopupDepend.options"
              :key="item.id"
              :label="item.cname"
              :value="item.id"
            >
            </el-option>
          </el-select>
          
          <!-- 二级 -->
          <el-select
            v-model="addPopupDepend.selectValuelev2"
            placeholder="请选择"
            @change="selectChanged2()"
          >
            <el-option
              v-for="item in addLev2Linkage"
              :key="item.id"
              :label="item.cname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择促销活动">
          <!-- 一级  -->
          <el-select v-model="dataForm.aid" placeholder="请选择">
            <el-option
              v-for="item in activityTable"
              :key="item.id"
              :label="item.activityName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="定价" style="margin-left:10% !important;">
          <el-input v-model="dataForm.oriprice"></el-input>
        </el-form-item>

        <el-form-item label="出版日期">
          <el-col :span="11">
            <el-date-picker
              type="date"
              v-model="dataForm.publishtime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="出版社">
          <el-input v-model="dataForm.publishment"></el-input>
        </el-form-item>

        <el-form-item label="特点">
          <el-input v-model="dataForm.featureinfo"></el-input>
        </el-form-item>

        <el-form-item label="购买页标题">
          <el-input type="textarea" v-model="dataForm.purchesTitle"></el-input>
        </el-form-item>

        <el-form-item label="是否为新书" style="width:40%">
          <el-switch v-model="dataForm.newbook"></el-switch>
        </el-form-item>

        <el-form-item label="图书封面" style="width:100%;">
          <el-upload
            :headers="uploadheaders"
            class="el-uploader"
            action="http://localhost:9019/book/upload/1"
            name="imgFile"
            list-type="picture-card"
            :on-success="handlePicSuccess"
            :before-upload="beforePicUpload"
          >
            <img v-if="dataForm.img" :src="'http://124.223.89.139/pic/'+dataForm.img" class="cover" />
            <i v-else class="el-icon-plus el-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="图书详细图片" style="width:100%">
          <span class="imgDetail">
            <el-upload
             :headers="uploadheaders"
              class="el-uploader"
              action="http://localhost:9019/book/upload/2"
              :show-file-list="false"
              name="imgFile"
              list-type="picture-card"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <img v-if="dataForm.detailImg1" :src="'http://124.223.89.139/pic/'+dataForm.detailImg1" />
              <i v-else class="el-icon-plus el-uploader-icon"></i>
            </el-upload>
          </span>

          <span class="imgDetail">
            <el-upload
             :headers="uploadheaders"
              class="el-uploader"
              action="http://localhost:9019/book/upload/3"
              :show-file-list="false"
              name="imgFile"
              list-type="picture-card"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <img v-if="dataForm.detailImg2" :src="'http://124.223.89.139/pic/'+dataForm.detailImg2" />
              <i v-else class="el-icon-plus cover-uploader-icon"></i>
            </el-upload>
          </span>

          <span class="imgDetail">
            <el-upload
             :headers="uploadheaders"
              class="el-uploader"
              action="http://localhost:9019/book/upload/4"
              :show-file-list="false"
              name="imgFile"
              list-type="picture-card"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <img v-if="dataForm.detailImg3" :src="'http://124.223.89.139/pic/'+dataForm.detailImg3" />
              <i v-else class="el-icon-plus el-uploader-icon"></i>
            </el-upload>
          </span>

          <span class="imgDetail">
            <el-upload
             :headers="uploadheaders"
              class="cover-uploader"
              action="http://localhost:9019/book/upload/5"
              :show-file-list="false"
              name="imgFile"
              list-type="picture-card"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <img v-if="dataForm.detailImg4" :src="'http://124.223.89.139/pic/'+dataForm.detailImg4" />
              <i v-else class="el-icon-plus el-uploader-icon"></i>
            </el-upload>
          </span>
        </el-form-item>

        <el-form-item label="图书内容简介" style="margin-right:50%;width:100%;">
          <el-input type="textarea" v-model="dataForm.content"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="doAdd()">添加</el-button>
          <el-button @click="dialogAddFormVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改图书弹框 -->
    <el-dialog title="修改图书" :visible.sync="dialogEditFormVisible">
      <el-form
        :inline="true"
        ref="dataForm"
        :model="dataForm"
        label-width="120px"
      >
        <el-form-item label="书籍名称">
          <el-input v-model="dataForm.bname"></el-input>
        </el-form-item>

        <el-form-item label="作者">
          <el-input v-model="dataForm.author"></el-input>
        </el-form-item>

        <el-form-item label="分类">
          <!-- 一级 -->
          <el-select
            v-model="addPopupDepend.selectValuelev1"
            placeholder="请选择"
            @change="selectChanged1()"
          >
            <el-option
              v-for="item in addPopupDepend.options"
              :key="item.id"
              :label="item.cname"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- 二级 -->
          <el-select
            v-model="addPopupDepend.selectValuelev2"
            placeholder="请选择"
            @change="selectChanged2()"
          >
            <el-option
              v-for="item in addLev2Linkage"
              :key="item.id"
              :label="item.cname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择促销活动">
          <!-- 一级 -->
          <el-select v-model="dataForm.aid" placeholder="请选择">
            <el-option
              v-for="item in activityTable"
              :key="item.id"
              :label="item.activityName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="定价" style="margin-left:10% !important;">
          <el-input v-model="dataForm.oriprice"></el-input>
        </el-form-item>

        <el-form-item label="出版日期">
          <el-col :span="11">
            <el-date-picker
              type="date"
              v-model="dataForm.publishtime"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item label="出版社">
          <el-input v-model="dataForm.publishment"></el-input>
        </el-form-item>

        <el-form-item label="购买页标题">
          <el-input type="textarea" v-model="dataForm.purchesTitle"></el-input>
        </el-form-item>

        <el-form-item label="特点">
          <el-input v-model="dataForm.featureinfo"></el-input>
        </el-form-item>

        <el-form-item label="是否为新书" style="width:40%">
          <el-switch v-model="dataForm.newbook"></el-switch>
        </el-form-item>

          <el-form-item label="图书封面" style="width:100%;">
          <el-upload
            :headers="uploadheaders"
            class="el-uploader"
            action="http://localhost:9019/book/upload/1"
            name="imgFile"
            list-type="picture-card"
            :on-success="handlePicSuccess"
            :before-upload="beforePicUpload"
          >
            <img v-if="dataForm.img" :src="'http://124.223.89.139/pic/'+dataForm.img" class="cover" />
            <i v-else class="el-icon-plus el-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="图书详细图片" style="width:100%">
          <span class="imgDetail">
            <el-upload
             :headers="uploadheaders"
              class="el-uploader"
              action="http://localhost:9019/book/upload/2"
              :show-file-list="false"
              name="imgFile"
              list-type="picture-card"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <img v-if="dataForm.detailImg1" :src="'http://124.223.89.139/pic/'+dataForm.detailImg1" />
              <i v-else class="el-icon-plus el-uploader-icon"></i>
            </el-upload>
          </span>

          <span class="imgDetail">
            <el-upload
             :headers="uploadheaders"
              class="el-uploader"
              action="http://localhost:9019/book/upload/3"
              :show-file-list="false"
              name="imgFile"
              list-type="picture-card"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <img v-if="dataForm.detailImg2" :src="'http://124.223.89.139/pic/'+dataForm.detailImg2" />
              <i v-else class="el-icon-plus cover-uploader-icon"></i>
            </el-upload>
          </span>

          <span class="imgDetail">
            <el-upload
             :headers="uploadheaders"
              class="el-uploader"
              action="http://localhost:9019/book/upload/4"
              :show-file-list="false"
              name="imgFile"
              list-type="picture-card"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <img v-if="dataForm.detailImg3" :src="'http://124.223.89.139/pic/'+dataForm.detailImg3" />
              <i v-else class="el-icon-plus el-uploader-icon"></i>
            </el-upload>
          </span>

          <span class="imgDetail">
            <el-upload
             :headers="uploadheaders"
              class="cover-uploader"
              action="http://localhost:9019/book/upload/5"
              :show-file-list="false"
              name="imgFile"
              list-type="picture-card"
              :on-success="handlePicSuccess"
              :before-upload="beforePicUpload"
            >
              <img v-if="dataForm.detailImg4" :src="'http://124.223.89.139/pic/'+dataForm.detailImg4" />
              <i v-else class="el-icon-plus el-uploader-icon"></i>
            </el-upload>
          </span>
        </el-form-item>

        <el-form-item label="图书内容简介" style="margin-right:50%;width:100%;">
          <el-input type="textarea" v-model="dataForm.content"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="doEdit()">修改</el-button>
          <el-button @click="dialogEditFormVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from "element-ui";
import {
  getBookListByCondition,
  getBookDetail,
  removeBook,
  addBook,
  editBook
} from "../../api/Book/book.js";
import {
  getCategories,
  getCategoryById,
} from "../../api/Categories/Categories.js";
import { allActivity } from "../../api/activity/activity";
export default {
  name: "BokTable",
  data() {
    return {
      title: "图书管理",
      queryForm: {
        bname: "",
        author: "",
        priceArea: "",
        cname: "",
        startTime: "",
        endTime: "",
        pageNo: 1,
        pageSize: 18,
        recordTotal: 100,
      },
      dataForm: {},
      dialogAddFormVisible: false,
      dialogEditFormVisible: false,
      tableData: [],
      activityTable: [],
      addPopupDepend: {
        // ! 添加系时需要的东西
        options: [{}],
        // * 一级下拉框
        selectValuelev1: "",
        // * 二级下拉框
        selectValuelev2: "",
      },
      dialogImageUrl: "",
      dialogImgVisible: false,
      disabled: false,
      uploadheaders:{"X-Token":"Bs-"+this.$store.getters.token}
    };
  },
  methods: {
    selectChanged1() {
      this.$forceUpdate();
      this.addPopupDepend.selectValuelev2 = "";
      this.dataForm.pcid = this.addPopupDepend.selectValuelev1;
    },
    selectChanged2() {
      this.dataForm.cid = this.addPopupDepend.selectValuelev2;
    },
    getList() {
      var _this = this;
      getBookListByCondition(_this.queryForm)
        .then((res) => {
          if (res.flag) {
            _this.tableData = res.data.result;
            _this.queryForm.recordTotal = res.data.recordTotal;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    doQuery() {
      this.getList();
    },
    doRemoveBook(book) {
      var _this = this;
      this.$confirm("此操作将永久删除该书籍, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        removeBook(book.id).then((res) => {
          if (res.flag) {
            _this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
          _this.getList();
        });
      });
    },
    handleCurrentChange(currentPage) {
      this.queryForm.pageNo = currentPage;
      this.getList();
    },
    showAddDialog() {
      this.dataForm = {};
      this.loadCategories();
      this.loadActivities();
      this.dialogAddFormVisible = true;
    },
    showEditDialog(bookinfo) {
              this.dialogEditFormVisible = true;
      var _this = this;
      this.dataForm = {};
      this.loadCategories();
      this.loadActivities();
      getBookDetail(bookinfo.id).then((res) => {
        if (res.flag) {
          _this.dataForm.bname = res.data.bname;
          _this.dataForm.author = res.data.author;
          _this.dataForm.currprice = res.data.currprice;
          _this.dataForm.oriprice = res.data.oriprice;
          _this.dataForm.publishment = res.data.publishment;
          _this.dataForm.publishtime = res.data.publishtime;
          _this.dataForm.featureinfo = res.data.featureinfo;
          _this.dataForm.purchesTitle = res.data.purchesTitle;
          _this.dataForm.newbook = res.data.newbook;
          _this.dataForm.content = res.data.content;
          if (res.data.aid != "null") {
            _this.dataForm.aid = res.data.aid;
          }
          getCategoryById(res.data.cid).then((resp) => {
            if (resp.flag) {
              if (resp.data.pid == "" || resp.data.pid == null) {
                _this.addPopupDepend.selectValuelev1 = resp.data.id;
                _this.selectChanged1();
              } else {
                _this.addPopupDepend.selectValuelev1 = resp.data.pid;
                _this.selectChanged1();
                _this.addPopupDepend.selectValuelev2 = resp.data.id;
                _this.selectChanged2();
              }
          
            }
          });
        }
      });
    },
    loadCategories() {
      this.addPopupDepend.options = [];
      this.addPopupDepend.selectValuelev1 = "";
      this.addPopupDepend.selectValuelev2 = "";
      this.dataForm.pcid = "";
      var _this = this;
      getCategories()
        .then((res) => {
          if (res.flag) {
            _this.addPopupDepend.options = res.data;
            //  _this.$forceUpdate();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    loadActivities() {
      allActivity().then((res) => {
        if (res.flag) {
          this.activityTable = res.data;
        }
      });
    },
    handlePicSuccess(res, file) {
      if(res.flag){
          switch(res.data.imgtype){
            case "cover" : this.dataForm.img=res.data.imgName; break;
            case "detail1": this.dataForm.detailImg1=res.data.imgName; break;
            case "detail2": this.dataForm.detailImg2=res.data.imgName; break;
            case "detail3": this.dataForm.detailImg3=res.data.imgName; break;
            case "detail4": this.dataForm.detailImg4=res.data.imgName; break;
          }
      }else{
        this.$message.error("文件上传失败")
      }
              
    },
    beforePicUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },
    handleRemove(file) {
      console.log(file);
    },
    doAdd(){
    addBook(this.dataForm).then((res)=>{
      if(res.flag){
        this.getList();
        this.dialogAddFormVisible=false;
      }
    })
    },
    doEdit(){
      editBook(this.dataForm).then((res)=>{
           if(res.flag){
        this.getList();
        this.dialogEditFormVisible=false;
      }
      })
    }
  },
  created() {
    this.getList();
  },
  computed: {
    // * 二级联动
    addLev2Linkage() {
      if (this.addPopupDepend.selectValuelev1 == "") {
        return [];
      } else {
        return this.addPopupDepend.options.filter((val, index) => {
          return val.id == this.addPopupDepend.selectValuelev1;
        })[0].scategories;
      }
    },
  },
};
</script>
<style scoped>
.headtitle {
  text-align: left;
  padding: 5px;
  border-bottom: 1px lightgrey solid;
  color: gray;
}
.conditionForm {
  width: 80%;
  margin: 50px auto 0px auto;
}
.imgDetail {
float: left !important;

}
.table {
  text-align: center !important;
}
.pageSty {
  position: absolute;
  left: 75%;
  bottom: 5%;
}

.el-uploader .el-upload {

  border-radius: 6px;
  cursor: pointer;
  position: absolute;
  display: inline-flex;
  overflow: hidden;
}
.el-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.cover {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
